<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="groupname" label="用户组"> </el-table-column>
      <el-table-column prop="explain" label="说明"> </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        :formatter="create_time"
      >
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="修改时间"
        :formatter="update_time"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row, $index }">
          <el-button type="success" size="mini" @click="detail(row, $index)"
            >详细</el-button
          >
          <el-button type="danger" size="mini" @click="remove(row, $index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right; margin: 20px; padding-right: 50px">
      <el-button type="primary" @click="add()">创建用户组</el-button>
    </div>

    <el-dialog
      title="修改用户信息"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div>
        <el-form :model="form" label-width="120px" style="width: 480px"
          ><el-form-item label="用户组名称">
            <el-input
              v-model="dialogData.groupname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input
              v-model="dialogData.explain"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      dialogData: {},
      dialogVisible: false,
    };
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      let k = this;
      axios({
        method: "post",
        url: "/group/list",
        dataType: "json",
      }).then(function (rsp) {
        console.log(rsp.data);
        if (rsp.data.msg == "success") {
          k.tableData = rsp.data.data;
        } else {
          k.$message.error("查询错误：" + rsp.data.msg);
        }
      });
    },
    detail(row, index) {
      this.$router.push({
        path: "/group/detail",
        query: { groupname: row.groupname },
      });
    },
    add() {
      this.dialogVisible = true;
    },
    submit() {
      let k = this;
      axios({
        method: "post",
        url: "/group/add",
        dataType: "json",
        data: k.dialogData,
      }).then(function (rsp) {
        if (rsp.data.msg == "success") {
          k.$message({
            message: "创建用户组成功！",
            type: "success",
          });
        } else {
          k.$message.error("创建用户组失败：" + rsp.data.msg);
        }
        k.dialogVisible = false;
        k.query();
      });
    },
    remove(row, index) {
      let k = this;
      axios({
        method: "post",
        url: "/group/remove",
        dataType: "json",
        data: {
          groupname: row.groupname,
        },
      }).then(function (rsp) {
        if (rsp.data.msg == "success") {
          k.$message({
            message: "删除成功！",
            type: "success",
          });
        } else {
          k.$message.error("删除失败：" + rsp.data.msg);
        }
        k.query();
      });
    },
    create_time(row, column) {
      var date = new Date(row.create_time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    update_time(row, column) {
      var date = new Date(row.update_time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
};
</script>
